<!DOCTYPE html>
<html lang="en">
<!--导入定义的变量-->
<#include "common/virs.ftl" />
<head>
    <meta charset="UTF-8">
    <title>${article.title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="hyblog,博客,杨德明,杨德明的个人博客,it,技术">
    <meta name="description" content="${article.summary}">
    <link rel="shortcut icon" href="./static/pic/favicon.ico">
    <link rel="stylesheet" href="${layui_css}">
    <link rel="stylesheet" href="${main_css}">
    <!-- 字体 -->
    <link rel="stylesheet" href="${font_awesome_css}">
    <!--动画-->
    <link href="${animate_css}" rel="stylesheet">
    <!-- markdown代码预览 -->
    <link rel="stylesheet" href="${editormd_css}"/>
    <link rel="stylesheet" href="${editormd_preview_css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<!--整体容器-->
<div class="hy-blog">
    <!--导航条导入-->
    <#include "templates/nav.html" />

    <!-- 主体内容 -->
    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <!--公告-->
            <div class="notice" style="color: red"><i class="fa fa-bell" aria-hidden="true" style="font-size: 25px; color: #1E9FFF;"></i>
                <span id="notice-span"><span class="animated fadeIn">公告：欢迎访问本站，祝您生活愉快~万事如意，事事顺心</span></span>
            </div>
            <!--主体内容-->
            <!--文章内容区域-->
            <div class="layui-col-md8 animated fadeInLeft article-content-area">
                <!--面包屑导航条-->
                <blockquote class="layui-elem-quote">
                    <span class="layui-breadcrumb" style="visibility: visible;">
                        <a><cite>首页</cite></a>
                        <a><cite>文章详情</cite></a>
                   </span>
                </blockquote>
                <!--文章名字 分类/发表时间/浏览量/点赞量/评论量-->
                <div class="article-header">
                    <h1 class="article-title">${article.title}</h1>
                    <div class="meta">
                        <span><i class="fa fa-list-alt" aria-hidden="true"></i> ${category.cname}</span>
                        <span><i class="fa fa-calendar" aria-hidden="true"></i> ${article.createTime?string('yy/MM/dd HH:mm:ss')}</span>
                        <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> ${article.votes}</span>
                        <span class="layui-hide-xs"><i class="fa fa-eye" aria-hidden="true"></i> ${article.hits}</span>
                        <span class="layui-hide-xs"><i class="fa fa-comments" aria-hidden="true"></i> ${commentNums}</span>
                    </div>
                </div>
                <!--正文部分-->
                <div class="article-body">
                    <div class="content" id="content"><!-- 请勿删除这行 -->
                        ${article.contentHtml};
                    </div><!-- 请勿删除这行 -->
                </div>

                <!--分割线-->
                <hr/>
                <!--文章footer 点赞/赞助/固定内容区域-->
                <div class="article-footer">
                    <span>您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请狠狠点击下面的两个按钮。</span>
                    <button class="layui-btn layui-btn-normal" id="donate">我要小额赞助</button>
                    <button class="layui-btn layui-btn-warm" id="vote">点赞</button>
                </div>
                <!--评论展示区-->
                <div class="comment-area">
                    <h2 style="margin-bottom: 20px;">最新评论</h2>

                    <#if commentList?size == 0>
                        <div class="comment-item">
                            <div class="comment-text" style="padding-top: 10px;">还没有评论，来说两句吧~</div>
                        </div>
                    </#if>

                    <#list commentList as comment>
                        <div class="comment-item">
                            <div class="comment-info">
                                <div class="layui-col-xs6 nickname"><span style="color: red;">#${comment.commentId}</span>&nbsp;${comment.createTime?string('yyyy/MM/dd
                                    HH:mm:ss')}
                                </div>
                                <div class="layui-col-xs6 vote">
                                    <button style="border: none;background: none;" class="voteOneComment">
                                        <i class="layui-icon layui-icon-praise"></i><span class="votesNum">${comment.votes}</span>
                                        <div style="display: none;" class="commentId">${comment.commentId}</div>
                                    </button>
                                </div>
                            </div>
                            <div class="comment-text">${comment.content}</div>
                        </div>
                    </#list>
                </div>
                <!--分页-->
                <div style="text-align: center;"><div id="paging" style="display: inline;"></div></div>
                <!--发表评论文本框-->
                <div class="comment-write">
                    <h2 style="margin-bottom: 20px">说两句吧</h2>
                    <form class="layui-form" action="/article/comment">
                        <div class="layui-form-item layui-form-text">
                            <textarea class="layui-textarea" name="commentContent" lay-verify="required"
                                      style="resize:none" placeholder="在遵守国家的法律法规的前提下，畅所欲言吧~"></textarea>
                        </div>
                        <div class="btnbox">
                            <div class="layui-input-inline">
                                <input type="text" name="vericode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                            </div>

                            <img alt="验证码" src="/vericode" onclick = "this.src='/vericode?d='+new Date()*1" style="width: 115px;height: 38px;" />
                            <button class="layui-btn" id="sure" lay-submit="" lay-filter="doComment">
                                确定
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!--导入右侧辅助区域-->
            <#include "templates/right.html"/>
        </div>
    </div>
    <!-- 主体内容end -->

    <!--导入footer-->
    <#include "templates/foot.html" />
</div>
<!--layui-->
<script src="${layui_js}"></script>
<!--markdown-->
<script src="${jquery_js}"></script>
<script src="${editormd_js}"></script>
<script src="${marked_js}"></script>
<script src="${prettify_js}"></script>

<script>
    //    显示html
    editormd.markdownToHTML("content");
    //config的设置是全局的
    layui.config({
        base: '/static/js/' //假设这是你存放拓展模块的根目录
    });
    layui.use(['element', 'carousel', 'form','laypage','jquery','common'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var common = layui.common;

        common.bindQQ();
        common.bindWechat();
        //异步请求分类,标签,友链信息
        common.querycategory();
        common.querytag();
        common.queryfriendshiplink();
        //获取公告
        common.getNotice();

        //给【技术讨论】添加layui-this的样式
        $("#nav-techdiss").addClass("layui-this");

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
        //执行一个laypage实例
        laypage.render({
            elem: 'paging'
            ,curr : ${page}
            ,count: ${commentNums} //数据总数，从服务端得到
            ,jump: function(obj, first){
                //首次不执行
                if(!first){
                    // article/3/10   第三页，每页10条
                    window.location.href="/details?aid=${article.aid}&page="+obj.curr+"&limit="+obj.limit;
                }
            }
        });
        //监听提交
        form.on('submit(doComment)', function (data) {
            var subDat = data.field;
            subDat.aid =${article.aid};
            /*layer.alert(JSON.stringify(subDat), {
             title: '最终的提交信息'
             });*/
            //异步请求提交
            $.ajax({
                url: "/article/comment",
                type: "POST",
                data: subDat,//【注意】这里的这个对象就只能套一层，如果套了多层，就会出现很奇怪的问题。
                async: false,
                error: function (data) {
                    layer.alert("出错了！服务器故障或本地网络错误。");
                },
                success: function (data) {
                    data = JSON.parse(data)
                    if (data.code == 0) {
                        layer.alert(data.msg);
                        //在DOM中插入评论
                        window.location.href="/details?aid=${article.aid}&page=${page}"
                    } else if (data.code == 1) {
                        layer.alert(data.msg);
                    }
                }
            });
            return false;
        });

        //给【文章点赞绑定】点击事件
        $("#vote").click(function () {
            var d={"aid":${article.aid}};
            $.ajax({
                url: "/article/vote",
                type: "POST",
                data: d,//【注意】这里的这个对象就只能套一层，如果套了多层，就会出现很奇怪的问题。
                async: false,
                error: function (data) {
                    layer.alert("出错了！服务器故障或本地网络错误。");
                },
                success: function (data) {
                    data = JSON.parse(data)
                    if (data.code == 0) {
                        layer.msg(data.msg);
                        //禁止按钮
                        $("#vote").attr('disabled',"true");
                        $("#vote").removeClass("layui-btn-warm");
                        $("#vote").addClass("layui-btn-disabled");

                    } else if (data.code == 1) {
                        layer.msg(data.msg);
                    }
                }
            });
        });
        //给评论点赞绑定事件
        $(".voteOneComment").click(function () {
            //获取当前条目id
            var commentId = $(this).find(".commentId").text();
            //获取当前按钮
            var btn = $(this);
            //表单提交数据
            var d = {"commentId":commentId};
            $.ajax({
                url: "/comment/vote",
                type: "POST",
                data: d,//【注意】这里的这个对象就只能套一层，如果套了多层，就会出现很奇怪的问题。
                async: false,
                error: function (data) {
                    layer.alert("出错了！服务器故障或本地网络错误。");
                },
                success: function (data) {
                    data = JSON.parse(data)
                    if (data.code == 0) {
                        layer.msg(data.msg);
                        //禁止按钮
                        btn.attr('disabled',"true");
                        //获取当前点击条目的点赞数
                        var votesNum = parseInt(btn.find(".votesNum").text());
                        //点赞加一
                        btn.find(".votesNum").text(votesNum+1);
                    } else if (data.code == 1) {
                        layer.msg(data.msg);
                    }
                }
            });
        });

        //给捐赠绑定点击事件
        $("#donate").click(function () {
            layer.open({
                type: 1,
                content: "<img src='http://img.dmyang.club/donate.jpg' style='width:320px;padding:20px;'></img>",
                title: "捐赠"
            });
        });
    });
</script>

</body>
</html>
